<template>
	<div>
		<div class="layout-breadcrumb">
			<Breadcrumb>
			    <BreadcrumbItem to="/">首页</BreadcrumbItem>
			    <BreadcrumbItem href="">系统配置</BreadcrumbItem>
			    <BreadcrumbItem href="/config/permission">权限管理</BreadcrumbItem>
			</Breadcrumb>
		</div>
		<div class="layout-content">
		    <div class="layout-content-main">
		    	<Row :gutter="10">
		    		<Col span="21" >
						<Input  placeholder="权限路径筛选,enter键搜索" v-model="params.name" clearable @on-enter="search" ></Input>
		    		</Col>
		    		<Col span="2"><Button  type="primary" icon="md-add" @click="newPer" long>主权限</Button></Col>
                    <Col span="1"><Button  type="primary" icon="md-refresh" @click="refresh" long></Button></Col>
		    	</Row>
                <Alert class="mt-10">
                    <p>1.权限有insert=新增 update=更新 del=删除 view=查询</p>
                    <p>2.当一个模块默认有一个view查询权限时，默认包含view查询下的所有权限，如果手动增加view下的某个权限那么需要查询该用户是否有该权限，其他操作同理</p>
                    <p>3.例子：config/view 包含config/view/list 权限，但如果手动增加config/view/list系统需要检测用户是否有该权限</p>
                </Alert>
		    	<Tree ref="tree"></Tree>
		    </div>
		</div>
		
	</div>
</template>
<script>
import {Row,Col,Breadcrumb,Button,Input,Alert} from 'view-design';


import Tree from 'admin/components/config/permission/tree';

export default{
	components:{
		Row,
        Col,
        Breadcrumb,
        'BreadcrumbItem' : Breadcrumb.Item,
        Button,
        Input,
        Tree,
        Alert,
    },
    data () {
        return {
        	params:{
        		name :'',
        	},
        }
    },
    methods:{
    	newPer(){
    		this.$refs.tree.newPer();
    	},
        refresh(){
            this.$refs.tree.getTree();
        },
        search(){
            this.$refs.tree.params = this.params;
            this.$refs.tree.getTree();
        }
    },
    created:function(){
    	
    },
    mounted:function(){
    	this.$store.dispatch('CHANGE_ROUTE',{name:'权限管理',route:'/config/permission',action:1,closable:true});
    }
}
</script>